<template>
	<view class="content"  v-if="userId">
		<view class="addgroup">
			<div class="item" v-for="(item,index) in grounp" :key="index">
				<image :src="item.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'" alt="" mode="aspectFill" />
				<text>{{item.realName}}</text>
			</div>
			<div class="add" v-if="groupLeader == userId" @click="[showdialog = true,isadd = true]">+</div>
			<div class="delete" v-if="groupLeader == userId"  @click="[showdialog = true,isadd = false]">-</div>
		</view>
		<view class="edid-groud-name"  v-if="userId == groupLeader" @click="$refs.groundNamepopup.open()">
			<view class="name-lable">群组名称</view>
			<view>{{groupName}}</view>
		</view>
		<view class="edit-content">
			<view class="delete edit-warp" @click="delgroup" v-if="userId == groupLeader">删除群组</view>
			<view class="delete edit-warp" @click="$refs.popup.open()" v-else>退出群组</view>
		</view>
		<view class="dialog" v-if="showdialog">
			<div class="dialog-header">
				<image src="../../static/img/close.png" mode="widthFix" @click="showdialog = false"></image>
				选择联系人
			</div>
			<div class="search"><input type="text" placeholder="搜索"></div>
			<div class="item-warp">
				<checkbox-group @change="checkboxChange">
					<div class="item" v-for="(item,index) in mailList" :key="index">
						<checkbox :value="item.codeId" :checked="item.checked" :disabled="item.codeId == groupLeader" />
						<image mode="aspectFill" :src="item.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'" />
						<div class="info">
							<div class="hd"><text>{{item.realName}}</text><text>{{item.appellations}}</text></div>
							<div class="phone">{{item.phone}}</div>
						</div>
					</div>
				</checkbox-group>
			</div>
			<div class="dialog-btn" @click="confim">完成</div>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog type="input" content="退出后将无法看到任何消息." :duration="2000" :before-close="true" @close="popupClose" @confirm="popupConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="groundNamepopup" type="dialog">
		     <uni-popup-dialog type="input" mode="input" :value="groupName" placeholder="输入群组名称" title="修改群组名称" message="成功消息" :duration="2000" :before-close="true" @close="groundNamepopupclose" @confirm="groundNamepopupconfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {getUrlParam} from '@/static/js/filter.js'
	const RongIMLib = require('@/static/js/IMSDK/RongIMLib-3.0.7-dev');
	// const im = RongIMLib.init({ appkey: 'qf3d5gbjq9qxh' });
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data(){
			return{
				grounp:[],
				showdialog:false,
				mailList:[],
				isCheck:[],
				isadd:true,
				groupLeader:getUrlParam('groupLeader'),
				userId:localStorage.IMCOEDID,
				groupName:'', //群组名称
			}
		},
		onShow(){
			const _this = this;
			_this.$api.findByHealthId().then((res)=>{
				if(res.data.StatusCode == 200){
					const data = res.data.Result
					_this.data = data;
				}  
			})
			_this.getgroupMembers()
			_this.groupName = decodeURI(getUrlParam('groupName'))
		},
		methods:{
			getgroupMembers(){
				this.$api.groupMembers({groupId:getUrlParam('groupId')}).then((res)=>{
					this.grounp = res.data.Result
				})
			},
			checkboxChange(e){
				this.isCheck = e.detail.value
			},
			confim(){
				if(this.isadd){
					// 添加人员
					const healthList = []
					const userList = []
					this.isCheck.map((res)=>{
						if(res.indexOf('Hlh') > -1){
							healthList.push(res.substr(4))
						}else{
							userList.push(res.substr(4))
						}
					})
					this.$api.inviteUser(getUrlParam('groupId'),{healthList:healthList,userList:userList,groupName:decodeURI(getUrlParam('groupName'))}).then((res)=>{
						if(res.data.StatusCode == 200){
							this.showdialog = false;
							this.getgroupMembers()
						}
					})
				}else{
					// 删除人员
					const healthList = []
					const userList = []
					this.isCheck.map((res)=>{
						if(res.indexOf('Hlh') > -1){
							healthList.push(res.substr(4))
						}else{
							userList.push(res.substr(4))
						}
					})
					this.$api.userQuit(getUrlParam('groupId'),{healthList:healthList,userList:userList,groupName:decodeURI(getUrlParam('groupName'))}).then((res)=>{
						if(res.data.StatusCode == 200){
							this.showdialog = false;
							this.getgroupMembers()
						}
					})
				}
			},
			// 删除群组
			delgroup(){
				const _this = this;
				var conversation = _this.$im.Conversation.get({
				  targetId: getUrlParam('groupId'),
				  type: RongIMLib.CONVERSATION_TYPE.GROUP
				});
				const obj = {
					content: '群主解散群组了',// 文本内容
					groupstatus:'groupDel',
					type:'groupMsg',
					contentType:'text',
					user:{
						id:localStorage.IMCOEDID,
						portraitUri:_this.data.headPicture,
						name:_this.data.realName,
					},
					groupinfo:{
						id:_this.groupId,
						name:decodeURI(getUrlParam('groupName')),
						portraitUri:'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/02adfa6dc7814095bfba3716a1ef63bf.png',
					}
				}
				conversation.send({
				  messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
				  content: obj
				}).then(function(message){
					_this.$api.dissolution(getUrlParam('groupId'),{healthList:[_this.groupLeader.substr(4)]}).then((res)=>{
						if(res.data.StatusCode == 200){
							var conversation = _this.$im.Conversation.get({
							  targetId: getUrlParam('groupId'),
							  type: RongIMLib.CONVERSATION_TYPE.GROUP
							});
							conversation.destory().then(function(){
							  console.log('删除会话成功');
							  uni.reLaunch({
							  	url:'/pages/index/consult'
							  })
							});
						}
					})
				});
			},
			// 退出群组
			quitgroup(){
				// 删除人员
				var healthList = []
				var userList = []
				if(this.userId.indexOf('Hlh') > -1){
					healthList = [this.userId.substr(4)]
				}else{
					userList = [this.userId.substr(4)]
				}
				this.$api.userQuit(getUrlParam('groupId'),{healthList:healthList,userList:userList,groupName:decodeURI(getUrlParam('groupName'))}).then((res)=>{
					if(res.data.StatusCode == 200){
						var conversation = _this.$im.Conversation.get({
						  targetId: getUrlParam('groupId'),
						  type: RongIMLib.CONVERSATION_TYPE.GROUP
						});
						conversation.destory().then(function(){
						  console.log('删除会话成功');
						  uni.navigateBack({
						  	delta:2
						  })
						});
					}
				})
			},
			popupClose(done){
				done()
			},
			 // 点击确认按钮触发
			popupConfirm(done,value){
				this.quitgroup()
				done()
			},
			// 修改群组弹窗关闭
			groundNamepopupclose(done){
				done()
			},
			// 修改群组弹窗确定
			groundNamepopupconfirm(done,value){
				const _this = this;
				var conversation = _this.$im.Conversation.get({
				  targetId: getUrlParam('groupId'),
				  type: RongIMLib.CONVERSATION_TYPE.GROUP
				});
				const obj = {
					content: '群主修改了群名：'+value,// 文本内容
					groupstatus:'editgroupName',
					type:'groupMsg',
					contentType:'text',
					user:{
						id:localStorage.IMCOEDID,
						portraitUri:_this.data.headPicture,
						name:_this.data.realName,
					},
					groupinfo:{
						id:getUrlParam('groupId'),
						name:value,
						portraitUri:'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/sms/user/2020/11/29ac15f982ef4d5780c7452ae3ca5610.png',
					}
				}
				conversation.send({
				  messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
				  content: obj
				}).then(function(message){
					_this.$set(_this,'groupName',value)
					done()
				});
			},
		},
		watch:{
			showdialog(v){
				if(this.isadd){
					this.$api.getMailList({pageIndex:1,pageSize:20,healthRank:'',phone:'',realName:''}).then((res)=>{
						const grounpCode = this.grounp.map((b)=>{return b.userId})
						this.mailList = res.data.Result.list.map((a)=>{
							a.checked = false
							if(grounpCode.indexOf(a.codeId) > -1){
								a.checked = true
							}
							return a
						})
					})
				}else{
					this.mailList = this.grounp.filter((a)=>{
						a.codeId = a.userId
						return a.userId != this.groupLeader
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: #f1f1f1;
		height: 100%;
	}
	.edid-groud-name{
		display: flex;
		line-height: 80upx;
		font-size: 26upx;
		background: #fff;
		margin-top: 15upx;
		padding: 0 20upx;
		align-items: center;
		.name-lable{
			flex:1;
			margin-right: 30upx;
		}
	}
	.addgroup{
		display: flex;
		padding: 20upx;
		flex-wrap: wrap;
		background: #fff;
		.item{
			margin: 20upx;
			text-align: center;
			image{width: 100upx;height: 100upx;display: block;}
			text{font-size: 26upx;margin-top: 16upx;display: block;}
			position: relative;
			.del-content{
				position: absolute;
				width: 100upx;
				height: 100upx;
				left: 0;
				top: 0;
				z-index: 100;
				background: rgba(0,0,0,.7);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.del-icon{
				width: 40upx;
				height: 40upx;
			}
		}
		.add,.delete{
			width: 100upx;
			height: 100upx;
			margin: 20upx;
			box-sizing: border-box;
			border: 1upx dashed #ccc;
			font-size: 60upx;
			text-align: center;
			line-height: 85upx;
			border-radius: 10upx;
			color: #9c9c9c;
		}
	}
	.edit-content{
		margin-top: 20upx;
		background: #fff;
		.edit-warp{
			line-height: 80upx;
			color: #ff4d4d;
			font-size: 26upx;
			text-align: center;
			border-bottom: 1upx solid #eaeaea;
		}
	}
	
	.dialog{
		width: 100vw;
		height: 100%;
		background: #F1F1F1;
		position: fixed;
		left: 0;
		bottom: 0;
		overflow: auto;
		border-top: 1upx solid #ccc;
		z-index: 999;
		.dialog-header{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			background: #f5f5f5;
			font-size: 26upx;
			position: fixed;
			z-index: 1000;
			image{
				position: absolute;
				width: 48upx;
				left: 20upx;
				top: 20upx;
			}
		}
		.search{
			display: flex;
			padding: 2vw;
			margin-top: 88upx;
			position: fixed;
			width: 96vw;
			background: #fff;
			z-index: 100;
			border-bottom:1upx solid #f1f1f1;
			input{
				box-sizing: border-box;
				flex:1;
				height: 60upx;
				border-radius: 10upx;
				padding-left: 2vw;
			}
			button{
				height: 60upx;
				margin-left: 20upx;
				line-height: 60upx;
				font-size: 26upx;
			}
		}
		.item-warp{
			padding-top: 176upx;
			max-height: 82vh;
			overflow: auto;
			background: #fff;
			.item{
				display: flex;
				padding: 2vw;
				align-items: center;
				image{
					width: 78upx;
					height: 78upx;
					border-radius:8upx;
				}
				.info{
					flex:1;
					margin-left: 2vw;
					padding:20upx 0;
					border-bottom:1upx solid #f1f1f1;
					.hd{
						display: flex;
						font-size: 30upx;
						text{
							color: #333;
							&:nth-of-type(1){
								margin-right: 20upx;
							}
						}
					}
					.phone{
						font-size: 28upx;
						color: #666666;
						margin-top: 10upx;
					}
				}
			}
		}
		.dialog-btn{
			width: 124upx;
			height: 58upx;
			line-height: 58upx;
			border-radius: 8upx;
			background: #38CB97;
			text-align: center;
			color: #fff;
			float: right;
			margin-top: 30upx;
			margin-right: 30upx;
		}
	}
	/deep/ .uni-checkbox-input{
		border-radius: 44upx;
	}
	/deep/ .uni-checkbox-input-checked{
		background: #38cb97;
		border-color: #38cb97;
		&::before{
			color: #fff;
		}
		&::hover{
			border-color: #38cb97;
		}
	}
</style>
